/* banner */
.banner-wrap {
    /* width: 2560px; */
    margin  : 0 auto;
    height  : 670px;
    width   : 100%;
    overflow: hidden;
}

.banner {
    width   : 1240px;
    margin  : 0 auto;
    position: relative;
    height  : 670px;
}

.banner-list {
    width   : 26043.4px;
    height  : 670px;
    position: absolute;
    /* 1240+(2560-1240)/2 = 1900 */
    left    : -660px;
    top     : 0;
}

.banner-list li {
    float: left;
}

.banner-nav {
    width      : 500px;
    padding    : 0 10px;
    height     : 25px;
    position   : absolute;
    z-index    : 20;
    left       : 50%;
    margin-left: -250px;
    bottom     : 20px;
    text-align : center;
}

.banner-nav li {
    display         : inline-block;
    zoom            : 1;
    width           : 8px;
    height          : 8px;
    background-color: #666;
    margin          : 5px 8px;
    border-radius   : 50%;
    cursor          : pointer;
}

.banner-nav li.banner-nav-on {
    background-color: transparent;
    border          : 1px solid #666;
}

/* container */
.container {
    background-color: #f4f4f4;
    height          : auto;
}

.adv-wrapper,
.phone-wrapper,
.music-wrapper,
.parts-wrapper,
.life-wrapper,
.community-wrapper,
.flyme-wrapper{
    margin-bottom: 50px;
}

.video-wrapper {
    padding-bottom: 50px;
}

/* adv */
.adv {
    height        : auto;
    padding-bottom: 45px;
    overflow      : hidden;
}

.adv-wrapper {
    height          : 277px;
    background-color: #fff;
    border-bottom   : 1px solid #eee;
}

.adv-list {
    max-width: 1240px;
    margin   : 0 auto;
}

.adv-list li {
    float      : left;
    position   : relative;
    width      : 25%;
    padding-top: 45px;
}

.adv-list li a {
    display   : block;
    width     : 100%;
    height    : 100%;
    text-align: center;
}

.adv-list li a img {
    width : 130px;
    height: 130px;
}

.adv-list li a em {
    display  : block;
    color    : #333;
    font-size: 20px;
    margin   : 10px 0;
}

.adv-list li a p {
    font-size: 14px;
    color    : #999;
}

/* 手机板块 */
.h3-title {
    font-size    : 30px;
    text-align   : center;
    margin-bottom: 20px;
}

.banner-img {
    height          : 450px;
    background-color: #fff;
    border-bottom   : 1px solid #eee;
    overflow        : hidden;
    transition: filter .3s;
    filter: brightness(1);

    &:hover{
    filter: brightness(1.1);
    }
}

.banner-img a {
    position: relative;
    display : block;
    width   : 100%;
    height  : 100%;
}

.banner-img a img {
    position : absolute;
    width    : auto;
    height   : auto;
    left     : 50%;
    top      : 50%;
    transform: translate(-50%, -50%);
}

.phone-content-list li {
    float           : left;
    position        : relative;
    width           : 303px;
    height          : 375px;
    margin-right    : 9px;
    margin-top      : 10px;
    background-color: #fff;
    overflow        : hidden;
    transform       : translateY(0);
    transition      : all 0.3s;

    &:hover {
        transform : translateY(-1px);
        box-shadow: 1px 1px 10px 1px #ccc;
    }
}

.phone-content-list li.phone-big {
    width : 615px;
    height: 610px;
}

.phone-content-list li.phone-big-last {
    margin-right: 0;
}

.phone-content-list li a {
    display   : block;
    width     : 100%;
    height    : 100%;
    text-align: center;
    position  : relative;
}

li.phone-big a img {
    position   : absolute;
    left       : 50%;
    bottom     : 0;
    height     : 460px;
    margin-left: -250px;
}

.goods-detail {
    position  : absolute;
    top       : 58px;
    left      : 0;
    width     : 100%;
    text-align: center;
}

.goods-name {
    display      : block;
    color        : #333;
    font-size    : 28px;
    margin-bottom: 0;
}

.goods-desc {
    display  : block;
    color    : #333;
    font-size: 18px;
    margin   : 10px 0;
}

.goods-price {
    position    : relative;
    display     : inline-block;
    color       : #c00;
    font-size   : 22px;
    padding-left: 14px;
}

.goods-sign {
    background-image: linear-gradient(120deg, #ff3149, #ff64a6);
    position        : absolute;
    top             : 30px;
    left            : 30px;
    display         : block;
    width           : 60px;
    height          : 60px;
    line-height     : 60px;
    color           : #fff;
    font-size       : 16px;
    text-align      : center;
    border-radius   : 50%;
}

li.phone-small:last-child {
    margin-right: 0;
}

li.phone-small a img {
    width     : 230px;
    height    : 230px;
    margin-top: 30px;
}

.phone-small .goods-detail {
    position  : absolute;
    top       : 270px;
    left      : 0;
    width     : 100%;
    text-align: center;
}

.phone-small .goods-name {
    color        : #333;
    font-size    : 16px;
    margin-bottom: 2px;
}

.phone-small .goods-desc {
    color    : #999;
    font-size: 14px;
}

/* music */
.content-box .phone-small:nth-child(1) .goods-sign,
.content-box .phone-small:nth-child(4n+1) .goods-sign {
    display: none;
}

.content-box .phone-small:nth-child(1) img,
.content-box .phone-small:nth-child(4n+1) img {
    margin-top: 0;
    width     : 100%;
    height    : 100%;
}

.content-box .phone-small:nth-child(1) .goods-name,
.content-box .phone-small:nth-child(4n+1) .goods-name {
    color        : #fff;
    font-size    : 21px;
    font-weight  : 700;
    margin-bottom: 0;
}

.content-box .phone-small:nth-child(1) .goods-desc,
.content-box .phone-small:nth-child(4n+1) .goods-desc {
    color: #fff;
}

.content-box .phone-small:nth-child(1) .goods-price,
.content-box .phone-small:nth-child(4n+1) .goods-price {
    color      : #ebce6b;
    font-size  : 24px;
    font-weight: 700;
}

.content-box .phone-small:nth-child(4n) {
    margin-right: 0;
}

/* 社区热帖 */
.community-content-list li {
    float           : left;
    position        : relative;
    width           : 303px;
    height          : 400px;
    margin-right    : 9px;
    margin-bottom   : 9px;
    background-color: #fff;
    overflow        : hidden;
    transform       : translateY(0);
    transition      : all 0.3s;

    &:hover {
        transform : translateY(-1px);
        box-shadow: 1px 1px 10px 1px #ccc;
    }

    a {
        display            : block;
        width              : 100%;
        height             : 100%;
        text-align         : center;
        background-repeat  : no-repeat;
        background-position: 50%;

        .commun-img {
            height  : 190px;
            position: relative;
            overflow: hidden;

            img {
                display: block;
                margin : 0 auto;
                width  : 100%;
                height : 100%;
            }
        }

        .commun-info {
            overflow   : hidden;
            height     : 42px;
            line-height: 42px;
            margin-top : 10px;
            padding    : 0 15px;

            img {
                width        : 36px;
                height       : 36px;
                border       : 1px solid #fff;
                border-radius: 50%;
                float        : left;
                box-shadow   : 1px 1px 1px 1px #eee;
            }

            span.commun-info-name {
                margin-left: 15px;
                text-align : left;
                float      : left;
            }
        }

        p {
            padding           : 10px 13px 15px;
            font-size         : 16px;
            line-height       : 27px;
            text-align        : left;
            height            : 66px;
            display           : block;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow          : hidden;
        }

        span.commun-tip {
            color     : #999;
            display   : block;
            padding   : 0 15px;
            margin-top: 10px;
            text-align: left;
        }
    }
}

.community-content-list li:nth-child(4n) {
    margin-right: 0;
}

/* Flyme */
.flyme-content-list li {
    float           : left;
    position        : relative;
    width           : 303px;
    margin-right    : 9px;
    background-color: #fff;
    overflow        : hidden;
    margin-bottom   : 15px;
    transform       : translateY(0);
    transition      : all 0.3s;

    &:hover {
        transform : translateY(-1px);
        box-shadow: 1px 1px 10px 1px #ccc;
    }

    &:first-child {
        width   : 615px;
        overflow: hidden;

        img {
            height: 245px;
        }
    }

    &:nth-child(3) {
        margin-right: 0;
        margin-left : 0;
    }

    &:nth-child(7) {
        margin-right: 0;
        margin-left : 0;
    }

    a {
        display            : block;
        width              : 100%;
        height             : 100%;
        text-align         : center;
        background-repeat  : no-repeat;
        background-position: 50%;

        img {
            display: block;
            margin : 0 auto;
            width  : 100%;
            height : 100%;
        }

        p {
            font-size  : 16px;
            line-height: 55px;
            max-height : 55px;
        }
    }
}

/* video */
.video-content-list li {
    float           : left;
    position        : relative;
    width           : 303px;
    margin-right    : 9px;
    background-color: #fff;
    overflow        : hidden;
    margin-bottom   : 15px;
    height          : 245px;
    transform       : translateY(0);
    transition      : all 0.3s;

    &:hover {
        transform : translateY(-1px);
        box-shadow: 1px 1px 10px 1px #ccc;
    }

    &:nth-child(4) {
        margin-right: 0;
        margin-left : 0;
    }

    &:nth-child(8) {
        margin-right: 0;
        margin-left : 0;
    }

    a {
        display            : block;
        width              : 100%;
        height             : 100%;
        text-align         : center;
        background-repeat  : no-repeat;
        background-position: 50%;
        position           : relative;

        i {
            content        : "";
            position       : absolute;
            width          : 30px;
            height         : 30px;
            background     : url('../images/index/container/video/play.png') no-repeat;
            background-size: 100%;
            right          : 15px;
            bottom         : 70px;
        }

        img {
            display: block;
            margin : 0 auto;
            width  : 100%;
            height : 190px;
        }

        p {
            font-size  : 16px;
            line-height: 55px;
            max-height : 55px;
        }
    }
}